<template>
  <div class="invite-friends">
    <div class="grid-box">
      <div class="box-content">
        <div class="logo-card">
          <img src="../../assets/images/invite/slogan.png" alt />
          <div class="openApp" id="downloadButton">立即打开</div>
        </div>
        <div class="playbill">
          <img src="../../assets/images/invite/mimaapp.png" alt />
        </div>
        <div class="swiper">
          <img src="../../assets/images/invite/larbad.png" alt />
          <div class="right-text">
            <!-- :class="num === 0 ? '' : 'items'" -->
            <ul :class="num === 0 ? '' : 'items'" :style="{top: '-' + num * 0.37333 + 'rem'}">
              <li>游戏精品账号1折起</li>
              <li>软件源码超低价</li>
              <li>热播影视一网打尽</li>
              <li>一元租极品游戏账号</li>
              <li>影视会员0.1元起</li>
              <li>创业资料宝典</li>
              <li>精品畅销电子书</li>
              <li>海量素材模板</li>
              <li>游戏精品账号1折起</li>
            </ul>
          </div>
        </div>
        <div class="red-pick">
          <img src="../../assets/images/invite/env_wps.png" alt />
          <div class="content">
            <div class="title">
              <div class="head">
                <img :src="invite.head_img_url" alt />
                <p>给你分享一个红包！</p>
              </div>
              <div class="pirce">
                <h1>{{ total }}</h1>
                <p>元</p>
              </div>
              <div class="decs">「新人专区购物仅需0.1元」</div>
            </div>
            <div class="feed-in">
              <div class="no-verify" v-if="noBand">
                <div class="phone">
                  <van-field
                    v-model="phone"
                    type="tel"
                    maxlength="11"
                    placeholder="请输入手机号码"
                    class="inp"
                  />
                </div>
                <div class="get-code">
                  <div class="code">
                    <van-field
                      v-model="code"
                      type="tel"
                      maxlength="6"
                      placeholder="请输验证码"
                      class="inp"
                    />
                  </div>
                  <div class="btn">
                    <img src="../../assets/images/invite/blueBack.png" alt v-if="codeing" />
                    <img src="../../assets/images/invite/grayBack.png" alt v-else />
                    <p @click="getCode" v-if="codeing">获取验证码</p>
                    <p v-else>{{ countDown }}秒后重发</p>
                  </div>
                </div>
              </div>
              <div v-else class="submitTotal">
                <h1>已发送至账户：</h1>
                <p>{{ phone }}</p>
              </div>
              <div class="btnBox">
                <div :class="noBand ? 'bind-phone' : 'bind-phone sacle'">
                  <img src="../../assets/images/invite/yellowBack.png" alt />
                  <p v-show="noBand" @click="bindPhone">绑定手机领取</p>
                  <p v-show="!noBand" id="downloadP">下载APP</p>
                </div>
              </div>
            </div>
            <div class="tags">
              <ul>
                <li>虚拟物品</li>
                <li>自动发货</li>
                <li>全网最低价</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="tagline">
          「密马」用户邀请好友最高可获
          <span>960元</span> 现金奖励
        </div>
        <div class="playbill">
          <img src="../../assets/images/invite/mimaapp.png" alt />
        </div>
        <div style="height: 40px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSinInfo, inviteBind, getSms } from '@/api/index'
import { Toast } from 'vant';
export default {
  data() {
    return {
      num: 0,
      timer: {},
      phone: "",
      code: "",
      codeing: true,
      countDown: 60,
      cutTimer: {},
      noBand: true,
      total: 0,
      invite: {},
      params: {}
    };
  },
  created() {
    this.$nextTick(() => {
      const height = document.documentElement.clientHeight;
      // 在页面整体加载完毕时
      window.onload = function () {
      // 把获取到的高度赋值给根div
      document.getElementById('app').style.height = `${height}px`;
    }
    })
    this.params = this.$route.query;
    var data = OpenInstall.parseUrlParams(); //openinstall.js中提供的工具函数，解析url中的所有查询参数
    new OpenInstall(
      {
        /*appKey必选参数，openinstall平台为每个应用分配的ID*/
        appKey: "w1b695",
        /*可选参数，自定义android平台的apk下载文件名；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*/
        //apkFileName : 'com.fm.openinstalldemo-v2.2.0.apk',
        /*可选参数，是否优先考虑拉起app，以牺牲下载体验为代价*/
        preferWakeup: true,
        /*自定义遮罩的html*/
        //mask:function(){
        //  return "<div id='openinstall_shadow' style='position:fixed;left:0;top:0;background:rgba(0,255,0,0.5);filter:alpha(opacity=50);width:100%;height:100%;z-index:10000;'></div>"
        //},
        /*openinstall初始化完成的回调函数，可选*/
        onready: function () {
          var m = this,
          button = document.getElementById("downloadButton");
          let p = document.getElementById("downloadP");
          // button.style.visibility = "visible";

          /*在app已安装的情况尝试拉起app*/
          m.schemeWakeup();
          /*用户点击某个按钮时(假定按钮id为downloadButton)，安装app*/
          button.onclick = function () {
            m.wakeupOrInstall();
            return false;
          };
          p.onclick = function () {
            m.wakeupOrInstall();
            return false;
          };
        },
      },
      data
    );
    this.timer = setInterval(() => {
      this.num === 8 ? (this.num = 0) : (this.num += 1);
    }, 2000);
    
    getSinInfo(this.params).then(res => {
      this.invite = res.data.user
      this.total = res.data.total_reduce_num
    })
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    getCode() {
      
      if (this.phone.length === 11) {
        this.$toast.loading({
          mask: false,
          message: '加载中'
        })
        let data = {
          phone: this.phone,
          event: 'invite_bind'
        }
        getSms(data).then(res => {
          if (res.code === 0) {
            this.$toast(res.msg)
            this.codeing = false;
            this.cutTimer = setInterval(() => {
              this.countDown -= 1;
              if (this.countDown === 0) {
                this.codeing = true;
                this.countDown = 60;
                clearInterval(this.cutTimer);
              }
            }, 999);
          }
        })
      } else {
        this.$toast('请输入正确的手机号')
      }
    },
    bindPhone() {
      // this.noBand = false
      if (this.phone.length === 11) {
        if (this.code.length === 6) {
          Toast.loading('加载中')
          this.params.phone = this.phone
          this.params.verify_code = this.code
          inviteBind(this.params).then(res => {
            console.log(res)
            if (res.code === 0) {
              Toast.success('绑定成功')
              this.noBand = false
            }
          })
        } else {
          this.$toast('请输入6位验证码')
        }
      } else {
        this.$toast('请输入手机号')
      }
    }
  },
};
</script>


<style lang="scss" scoped>

@keyframes backword {
  0% {
    transform: scale(1, 1);
  }
  // 40% {
  //   transform: scale(1, 1);
  // }

  50% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}
.invite-friends {
  // width: 100%;
  min-height: 100vh;
  max-width: 10rem;
  margin: 0 auto;
  background: #ffdd07;
  .grid-box {
    // width: 100%;
    // height: 100%;
    min-height: 100vh;
    background: url("../../assets/images/invite/grid.png");
    // opacity: 0.5;
    .box-content {
      // opacity: 1;

      .logo-card {
        background: #ffffff;
        height: 65px;
        padding: 0px 15px 0 10px;
        border-bottom: 5px solid #000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 245px;
        }
        .openApp {
          font-size: 14px;
          font-weight: 800 !important;
          color: #2f2f2f !important;
          border-radius: 20px;
          height: 30px;
          width: 80px;
          background: #ffdd07;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            display: block;
            position: absolute;
          }
        }
      }
      .playbill {
        margin-top: 20px;
        img {
          width: 100%;
          display: block;
        }
      }
      .swiper {
        width: 204px;
        height: 32px;
        background: rgba($color: #000000, $alpha: 0.6);
        border-radius: 30px;
        margin-top: -20px;
        left: 50%;
        margin-left: -102px;
        position: relative;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 30px;
        img {
          width: 14px;
          margin-right: 6px;
          display: block;
          margin-top: 1px;
        }
        .right-text {
          overflow: hidden;
          height: 0.37333rem;
          flex: 1;
        }
        .items {
          transition: all 0.3s;
        }
        ul {
          padding: 0;
          font-size: 12px;
          color: #fff;
          position: relative;
          position: flex;
          top: -14px;
          line-height: 14rem;

          li {
            padding-top: 1.3px;
            height: 0.37333rem;
            display: flex;
            align-items: center;
          }
        }
      }
      .red-pick {
        margin-top: 22px;
        width: 375px;
        position: relative;
        margin: 20px auto 0;
        img {
          width: 375px;
          display: block;
        }
        .content {
          width: 240px;
          height: 100%;
          left: 50%;
          margin-left: -120px;
          // background: rgba($color: #000000, $alpha: 0.5);
          position: absolute;
          top: 0;
          .title {
            width: 100%;
            height: 120px;
            // background: rgba($color: #713cee, $alpha: 0.5);
            .head {
              display: flex;
              justify-content: center;
              align-items: center;
              padding-top: 20px;
              img {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                margin-right: 4px;
              }
              p {
                font-size: 12px;
                color: #2f2f2f;
              }
            }
            .pirce {
              display: flex;
              align-items: flex-end;
              // text-align: center;
              justify-content: center;
              margin-top: 8px;
              color: #ff0015;
              h1 {
                font-size: 56px;
                font-weight: 800;
                line-height: 52px;
              }
              p {
                font-size: 24px;
                font-weight: 800;
              }
            }
            .decs {
              text-align: center;
              color: #ff0015;
              font-size: 12px;
              font-weight: 600;
              margin-top: 5px;
            }
          }
          .feed-in {
            // height: 255px;

            // background: rgba($color: #06f0f0, $alpha: 0.5);
            padding: 40px 4px 0 4px;
            .no-verify {
              width: 236px;
              margin: 0 auto;
              // font-size: 14px !important;
              .phone {
                border-radius: 8px;
                overflow: hidden;
                border: 4px solid #000;
              }
              .get-code {
                margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .code {
                  width: 133px;
                  border-radius: 8px;
                  overflow: hidden;
                  border: 4px solid #000;
                }
                .btn {
                  width: 94px;
                  position: relative;
                  img {
                    display: block;
                    width: 94px;
                  }
                  p {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    color: #ffffff;
                    font-weight: 800;
                    line-height: 14px;
                  }
                }
              }
            }
            .submitTotal {
              height: 114px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              padding-left: 30px;
              color: #ffdd07;
              h1 {
                font-size: 14px;
                padding-bottom: 10px;
              }
              p {
                font-size: 24px;
                font-weight: 600;
              }
            }
            .btnBox {
              width: 100%;
              height: 65px;
            }
            .bind-phone {
              padding: 10px 9px 0px;
              position: relative;
              height: 65px;
              p {
                position: absolute;
                width: 100%;
                font-size: 20px;
                line-height: 26px;
                font-weight: 800;
                display: flex;
                justify-content: center;
                color: #000000;
                top: 0;
                left: 0;
                padding-top: 22px;
              }
            }
            .sacle {
              animation: backword 1.5s infinite;
            }
          }
          .tags {
            ul {
              display: flex;
              justify-content: space-between;
              padding: 10px 26px 0;
              font-size: 12px;
              color: #ffffff;
              li {
                position: relative;
                line-height: 10px;
              }
            }
            li:nth-child(1)::before {
              content: "";
              height: 100%;
              border-right: 1px solid #ffffff;
              position: absolute;
              top: 0px;
              right: -9px;
            }
            li:nth-child(2)::before {
              content: "";
              height: 100%;
              border-right: 1px solid #ffffff;
              position: absolute;
              top: 0px;
              right: -9px;
            }
          }
        }
      }
      .tagline {
        color: #000000;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-top: 15px;
        line-height: 14px;
        span {
          font-size: 20px;
          line-height: 18px;
          padding: 0 2px;
          color: #ff0015;
          // margin-top: 6px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.phone {
  .van-field__control {
    font-size: 14px !important;
    height: 24px !important;
    font-weight: 600;
  }
}
.get-code {
  .van-field__control {
    font-size: 14px !important;
    height: 24px !important;
    font-weight: 600;
    width: 133px;
  }
}
</style>